<template>
 <div class="folkways_grade pd_40">
   <div>
     <el-row :gutter="40">
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">文章名称</span>
          <el-input
            placeholder="请输入"
            v-model.trim="tableData.title">
          </el-input>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">民俗名称</span>
          <el-input
            placeholder="请输入"
            v-model.trim="tableData.spotname">
          </el-input>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">推荐状态</span>
             <el-select v-model.trim="tableData.grade_status">
              <el-option
                v-for="item in gradeStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
      </el-col>

      <el-col class='mg_t20' :span="7">
        <div class="fsc">
          <span class="articlelist_lable">民俗位置</span>
          <el-input
            placeholder="请输入"
            v-model.trim="tableData.address">
          </el-input>
        </div>
      </el-col>
      <el-col class='mg_t20' :span="7">
        <div class="fsc">
          <span class="articlelist_lable">民俗推荐</span>
           <el-select v-model="tableData.grade_id">
              <el-option
                v-for="item in spotGrade"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
      </el-col>
      <el-col class='mg_t20' :span="7">
        <div class="fsc">
          <span class="articlelist_lable">上架时间</span>
          <div class="fsc">
            <div>
              <el-date-picker
                class="articlelist_lable_time"
                v-model="tableData.start"
                v-on:change='upDateTime'
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </div>
            <span>-</span>
            <div>
              <el-date-picker
                class="articlelist_lable_time"
                v-on:change='upDateTime'
                v-model="tableData.end"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </div>
        </div>
      </el-col>
     </el-row>
     <p class="articlelist_query fec">
      <el-button @click="reset">重置</el-button> 
      <el-button @click="getList('query')" type="primary">查询</el-button>
    </p>
   </div>
   <div>
     <el-table
      :data="tableList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="title"
        label="文章名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="starttime"
        align="center"
        label="上架时间"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        label="民俗名称">
        <template slot-scope="scope">
          <span>{{!scope.row.spotname?'--':scope.row.spotname}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="民俗推荐">
        <template slot-scope="scope">
          <span>{{scope.row.name==null?'--':scope.row.name}}</span>
        </template>
      </el-table-column>
      
      <el-table-column
        align="center"
        prop="address"
        label="地理位置">
        <template slot-scope="scope">
          <span class="">{{scope.row.address==null?'--':scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="推荐词">
        <template slot-scope="scope">
          <span class="t_hid1">{{scope.row.words?scope.row.words:'--'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"  
        label="评比状态">
        <template slot-scope="scope">
          <span>{{isStatus(scope.row.grade_status)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        width="220"
        label="操作">
        <template slot-scope="scope">
        <el-button type="primary" size="small">预览</el-button>
        <el-button @click="administration(scope)" type="success" size="small">{{scope.row.grade_status==3?'重评':'管理'}}</el-button>
        <el-button v-show="scope.row.grade_status == 2" @click="lower(scope.row.id)" type="warning" size="small">摘星</el-button>
      </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="block fec mg_t30 mg_b100">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      current-page.sync="current"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

  <!--点击管理alert-->
  <el-dialog
    title="推荐管理"
    :visible.sync="centerDialogVisible"
    width="500px"
    center>
    <el-form :model="dialog" :rules="rules" ref="dialog" label-width="100px" class="demo-form">
        <el-form-item label="民俗名称" prop="spotname">
            <el-input placeholder="请输入民俗规范名称" v-model.trim="dialog.spotname"></el-input>
        </el-form-item>
        <el-form-item label="民俗推荐" prop="grade_id">
            <el-select v-model="dialog.grade_id">
             <el-option v-for="(item,index) in spotGrade1" :label="item.label" :key="index" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="地理位置" prop="address">
            <el-input placeholder="请输入地理位置" v-model.trim="dialog.address"></el-input>
        </el-form-item>
       
        <el-form-item label="推荐词" prop="words">
            <el-input placeholder="请输入风味推荐词" type="textarea" v-model.trim="dialog.words"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button   @click="resetForm('dialog')">取消</el-button>
      <el-button type="primary" @click="submitForm('dialog')">确定</el-button>
    </span>
  </el-dialog>
 </div>

 
</template>
<script>
export default {
  data() {
    return {
      index: 1,         //dialog 按钮
      current: '',       //分页默认
      centerDialogVisible: false,
      total: null,  //总条数
      tableData: {    //列表参数
        categories_id: 4,
        title: '',
        grade_id: '',
        spotname: '',
        grade_status: '',
        address: '',
        start: '',
        end: '',
        page: '',
        
      },
      dialog: {    //dialog修改参数
        j: '',
        w: '',
        spotname: '',
        grade_id: '',
        address: '',
        words: '',
        type: 2,
      },
      tableList: [],    //表格数据
      rules: {
        spotname: [
          { required: true, message: '请输入景点名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        grade_id: [
          { required: true, message: '请选景点推荐', trigger: 'change' }
        ],
        address:[
          { required: true, message: '请填写地理位置', trigger: 'blur' }
        ],
        words: [
          { required: true, message: '请填写推荐词', trigger: 'blur' }
        ]
      },
      gradeStatus: [       //推荐标准
        { value: '', label: '全部'},
        { value: 1, label: '待推荐'}, 
        { value: 2, label: '已推荐'}, 
        { value: 3, label: '已摘星'}
      ],

      spotGrade: [          //民俗推荐
        { value: '', label: '全部'},
        { value: 10, label: '点赞'}, 
        { value: 11, label: '鼓掌'}, 
        { value: 12, label: "呐喊"},
      ],
      spotGrade1: [          //民俗推荐
        { value: 10, label: '点赞'}, 
        { value: 11, label: '鼓掌'}, 
        { value: 12, label: "呐喊"},
      ],
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList(label) {           //获取列表
      if(label == 'query') {
        this.current = 1;
        this.page = 1;
      };
      this.tableData.start = !this.tableData.start==''?Number(this.tableData.start):'';
      this.tableData.end = !this.tableData.end==''?Number(this.tableData.end):'';
      let url = '/admin/grade/grade';
      let data = this.tableData;
      this.$request.get(url,data).then(res=> {
        console.log(res.data)
        if(res.data.code=='0000') {
          this.tableList = res.data.data.list;
          // this.total = res.data.data.page.total;
        }
      })
    },
    administration(scope) {              //管理获取详情
      let row = scope.row;
      if(row.grade_id == 0) {
        this.dialog.grade_id = '';
      }else {
        this.dialog.grade_id = row.grade_id;
      }
      this.dialog.aid = row.id;
      this.dialog.spotname = row.spotname;
      this.dialog.address = row.address;
      this.dialog.words = row.words;
      this.centerDialogVisible = true
     
    },
    lower(aid) {
      this.$confirm('确定摘星吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/admin/grade/cancel';
        let data = {
          aid,
          type: 1, 
        }
        this.$request.post(url, data).then(res=> {
          if(res.data.code == '0000') {
            this.$message({
              type: 'success',
              message: '摘星成功!'
            });
            this.getList()
          }else{
            this.$message.error('操作失败')
          }
          
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
    },
    isStatus(status) {       //判断推荐状态
      if(status == 1) {
        return '待推荐'
      }else if(status == 2) {
        return '已推荐'
      }else if(status == 3) {
        return '已摘星'
      }
    },
    reset() {               //重置
      this.tableData.title = '';
      this.tableData.grade_id = '';
      this.tableData.spotname = '';
      this.tableData.grade_status = '';
      this.tableData.address = '';
      this.tableData.start = '';
      this.tableData.end = '';
      this.getList('query');
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    upDateTime() {
      if(this.tableData.end) {
        if(this.tableData.start - this.tableData.end > 0) {
          this.$message.error('时间输入错误')
        }
      }
    },
    handleCurrentChange(val) {         //请求第几页
      this.tableData.page = val;
      this.getList();
    },
    
    submitForm(formName) {
      this.$utils.codeAddress({
        address: this.dialog.address,
        success: (res) => {
          this.dialog.j = res.location.lng;
          this.dialog.w = res.location.lat;
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let url = '/admin/grade/grademanage';
              let data = this.dialog;
              this.$request.post(url,data).then(res => {
                if(res.data.code == '0000') {
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
                  this.centerDialogVisible = false;
                  this.getList();
                }else{
                  this.$message.error('操作失败')
                }
              }).catch(err=> {
                this.$message.error('操作失败')
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }
      })
    },

    resetForm(formName) {
        this.centerDialogVisible = false;
        this.$refs[formName].resetFields();
    }
  },
  
}
</script>
<style scoped lang="less">
  .articlelist_lable {
    min-width: 20%;
    white-space: nowrap;
  }
  .articlelist_query {
    margin-right: 100px;
    height: 100px;
  }
</style>

